import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {_HttpClient} from '@delon/theme';
import {environment} from '@env/environment';

@Component({
    selector: 'app-froala',
    templateUrl: './froala.component.html',

})

export class FroalaComponent implements OnInit {

    @Output() froala = new EventEmitter();

    @Input() froalaText: string;

    option;

    constructor() {
        this.froalaText = '';
    }

    ngOnInit() {
        const that = this;
        this.option = {
            heightMin: 200,
            language: 'zh_cn',
            placeholderText: '请输入内容',
            charCounterCount: true, // 是否开启统计字数
            // charCounterMax: 200, // 最大输入字数,目前只支持英文字母
            // 注意导航条的配置, 按照官方的文档,无法配置,只能使用toolbarButtons来配置了。
            toolbarButtons: ['fullscreen', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'align', 'fontFamily', 'fontSize', 'color', 'insertLink', 'insertImage', 'insertHR', 'subscript', 'superscript'],
            codeMirror: false, // 高亮显示html代码
            codeMirrorOptions: { // 配置html代码参数
                tabSize: 4
            },
            // 上传图片，视频等稳健配置
            imageUploadURL: environment.SERVER_URL + 'Upload/simupload',
            // imageUploadParams: {uid: this.questionListService.userInfo.id},//接口其他传参,默认为空对象{},
            imageUploadMethod: 'POST',
            imageShowURL: environment.SERVER_URL + 'Upload/',
            events: {
                'froalaEditor.keyup': function (e, editor) {
                    that.froala.emit(that.froalaText);
                },
                'froalaEditor.blur': function (e, editor) {
                    that.froala.emit(that.froalaText);
                },

            }
        };
    }

}
